<template>
  <div class="classList_main">
    <div
      class="classList"
      v-for="(element, index) in lsit"
      :key="index"
      @click="onClicklist(element.id)"
    >
      <img :src="element.icon" alt="" />
      <div>{{ element.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    lsit: {
      required: true,
    },
  },
  methods: {
    onClicklist(id) {
      console.log(id);
      this.$router.push({ path: "/PATH.CLASSIFY_LIST", query: { id } });
    },
  },
};
</script>
<style lang="scss">
.classList_main {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  > div {
    margin: 0.1rem;
    width: 27%;
    font-size: 0.3rem;
    text-align: center;
    img {
      width: 100%;
    }
  }
}
</style>